<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>商品类型列表 - Powered By ${systemConfig.systemName}</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="${base}/template/assets/i/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="${base}/template/assets/i/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <link rel="apple-touch-icon-precomposed" href="${base}/template/assets/i/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="${base}/template/assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="${base}/res/css/amazeui.min.css">
  <link rel="stylesheet" href="${base}/res/css/app.css">
  <link rel="stylesheet" href="${base}/res/css/admin.css">
  <script src="${base}/res/js/jquery.min.js"></script>
  <script type="text/javascript">
  $().ready(function() {

	var $productAttributeType = $("#productAttributeType");
	var $productAttributeTypeTr = $("#productAttributeTypeTr");
	var $addAndRemoveTr = $("#addAndRemoveTr");
	var init = 0;
	
	// 显示选项内容 注：因为下拉框初始化时会触发
	// change事件，所以如果是新增时才执行productAttributeChange
	$productAttributeType.change(function() {
		if (init > 0){
			productAttributeChange();
		}
		init = init + 1;
	})

	// 增加选项内容输入框
	$("#addImage").click( function() {
		addAttributeOptionTr();
	})
	
	// 减少选项内容输入框
	$("#removeImage").click( function() {
		removeAttributeOptionTr();
	})
	
	function productAttributeChange() {
		$addAndRemoveTr.hide();
		$(".attributeOptionTr").remove();
		if($productAttributeType.val() == "select" || $productAttributeType.val() == "checkbox") {
			addAttributeOptionTr();
			$addAndRemoveTr.show();
		}
	}

	function addAttributeOptionTr() {
		var attributeOptionTrHtml = '<div id="attributeOptionTr"  class="attributeOptionTr am-g am-margin-top">'
						            +'<div class="am-u-sm-4 am-u-md-2 am-text-right">选项内容</div>'
						            +'<div class="am-u-sm-8 am-u-md-4">'
						            +'<input type="text" name="attributeOptionList" class="" value="${list!}" />'	
						            +'</div>'
						            +'<div class="am-hide-sm-only am-u-md-6 am-text-warning" style="padding:0px;margin:0px;">'
						            +'<button id = "deleteImage" type="button" onclick="deleteImageBtn()" class="am-btn am-btn-warning am-btn-xs"><span class="am-icon-trash-o"></span></button>'
									+'</div>'
						          	+'</div>';
		if($(".attributeOptionTr").length > 0) {
			$("#attributeOptionTr").after(attributeOptionTrHtml);
		} else {
			$productAttributeTypeTr.after(attributeOptionTrHtml);
		}
	}

	//删除选项内容输入框
	function removeAttributeOptionTr() {
		if($(".attributeOptionTr").length > 1) {
			$(".attributeOptionTr:last").remove();
		} else {
			alert("请至少保留一个选项!");
		}
	}
})
//删除选项内容输入框
function deleteImageBtn(){
	if($(".attributeOptionTr").length > 1) {
		//$(this).parent().parent().remove();
		$(".attributeOptionTr:last").remove();
	} else {
		alert("请至少保留一个选项!");
	}
}
</script>
<style type="text/css">
<!--

#deleteImage, #addImage, #removeImage {
	cursor: pointer;
}

-->
</style>
	<%
	var isAdd = false;
	var isEdit = false;
	if(isEmpty(productAttribute.id)){
		isAdd = true;
	}else{	
		isEdit = true;
	}%>
</head>
<body>
<!--在这里编写你的代码-->
<div class="admin-content">
	 <div class="am-cf am-padding">
	   <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">商品管理</strong> / <small><%if(isAdd){%>添加商品属性<%}else{%>编辑商品属性<%}%></small></div>
	 </div>
	 <hr style="padding:0px 1.6rem 1.6rem 1rem;margin:0px;">
	 <div class="am-g" >
		<div class="am-u-sm-12" style="padding:0px 5px 0px 0px;margin:0px; height: 700px;">
		    <form id="inputForm" class="am-form" action="<%if (isAdd){%>${base}/productAttribute/save<%}else{%>${base}/productAttribute/update<%}%>" method="post">
	          <input type="hidden" name="productAttribute.id" value="${productAttribute.id!}" />
	          <div class="am-g am-margin-top">
	            <div class="am-u-sm-4 am-u-md-1 am-text-right">所属商品类型</div>
	            <div class="am-u-sm-8 am-u-md-4">
	             	<select name="productAttribute.productType_id" id="productTypeId"  data-am-selected="{btnSize: 'sm', btnStyle: 'secondary'}">
						<%for(list in allProductType){%>
							<option value="${list.id}"<%if (list.id == productTypeId! || list.id == productAttribute.productType.id!){%> selected <%}%>>${list.name}</option>
						<%}%>
					</select>
	            </div>
	            <div class="am-hide-sm-only am-u-md-6 am-text-warning">${productTypeIdMessages!}</div>
	          </div>
	          
	          <div class="am-g am-margin-top">
	            <div class="am-u-sm-4 am-u-md-1 am-text-right">商品属性名称</div>
	            <div class="am-u-sm-8 am-u-md-4">
	              <input type="text" name="productAttribute.name" id="productAttributeName" class="am-input-sm" value="${productAttribute.name!}" required/>
	            </div>
	            <div class="am-hide-sm-only am-u-md-6 am-text-warning">${nameMessages!}</div>
	          </div>
	          
	          <div id="productAttributeTypeTr" class="am-g am-margin-top">
	            <div class="am-u-sm-4 am-u-md-1 am-text-right">商品属性类型</div>
	            <div class="am-u-sm-8 am-u-md-4">
	            	<select id="productAttributeType" name="attributeType" data-am-selected="{btnSize: 'sm', btnStyle: 'secondary'}" >
						<%for(list in allAttributeType){%>
							<option value="${list}"<%if (isEdit && list == productAttribute.attributeType!){%> selected <%}%>>
							${i18n("AttributeType."+list)}				
							</option>
						<%}%>
					</select>
	            </div>
	            <div class="am-hide-sm-only am-u-md-6 am-text-warning">${attributeTypeMessages!}</div>
	          </div>
	          <%if (productAttribute.attributeType! == "select" || productAttribute.attributeType! == "checkbox"){%>
					<%for(list in productAttribute.attributeOptionList){%>
					  <div id="attributeOptionTr"  class="attributeOptionTr am-g am-margin-top">
			            <div class="am-u-sm-4 am-u-md-1 am-text-right">选项内容</div>
			            <div class="am-u-sm-8 am-u-md-4">
			            	<input type="text" name="attributeOptionList" class="" value="${list!}" />
			            </div>
			            <div class="am-hide-sm-only am-u-md-6 am-text-warning">
			            	<button id="deleteImage" type="button" onclick="deleteImageBtn()" class="am-btn am-btn-warning am-btn-xs"><span class="am-icon-trash-o"></span></button>
						</div>
			          </div>
					<%}%>
				<div id="addAndRemoveTr" class="am-g am-margin-top">
				<%}else{%>
				<div id="addAndRemoveTr" class="am-g am-margin-top" style="display: none;">
				<%}%>		
			     	<div class="am-u-sm-4 am-u-md-1 am-text-right">&nbsp;</div>
			   		<div class="am-u-sm-8 am-u-md-4" >
		            	<button id="addImage" type="button"  class="am-btn am-btn-success am-btn-xs">+</button>
						<button id="removeImage" type="button"  class="am-btn am-btn-warning am-btn-xs">-</button>
			        </div>
			        <div class="am-hide-sm-only am-u-md-6 am-text-warning"></div>
		     	</div>
					
	           <div class="am-g am-margin-top">
	            <div class="am-u-sm-4 am-u-md-1 am-text-right">排序</div>
	            <div class="am-u-sm-8 am-u-md-4">
	              <input type="text" name="productAttribute.orderList" class="" value="${productAttribute.orderList!50}" title="只允许输入零或正整数" required/>
	            </div>
	            <div class="am-hide-sm-only am-u-md-6 am-text-warning">${orderListMessages!}</div>
	          </div>
	          
	          <div class="am-g am-margin-top">
	            <div class="am-u-sm-4 am-u-md-1 am-text-right" style="margin-top:0.8rem">是否必填</div>
	            <div class="am-u-sm-8 am-u-md-4">
	             <div class="am-g">
					  <div class="am-u-sm-2"><label class="am-radio am-secondary"><input type="radio" name="productAttribute.isRequired" value="true" data-am-ucheck<%if (productAttribute.isRequired! == true){%> checked<%}%>> 是</label></div>
					  <div class="am-u-sm-10"><label class="am-radio am-secondary"><input type="radio" name="productAttribute.isRequired" value="false" data-am-ucheck<%if (isAdd || productAttribute.isRequired == false){%> checked<%}%>> 否</label></div>
					</div>
	             </div>
	             <div class="am-hide-sm-only am-u-md-6 am-text-warning">${isRequiredMessages!}</div>
	          </div>
	        
	          <div class="am-g am-margin-top">
	            <div class="am-u-sm-4 am-u-md-1 am-text-right" style="margin-top:0.8rem">是否启用</div>
	            <div class="am-u-sm-8 am-u-md-4">
	            	<div class="am-g">
					  <div class="am-u-sm-2"><label class="am-radio am-secondary"><input type="radio" name="productAttribute.isEnabled" value="true" data-am-ucheck<%if (isAdd || productAttribute.isEnabled == true){%> checked<%}%>> 是</label></div>
					  <div class="am-u-sm-10"><label class="am-radio am-secondary"><input type="radio" name="productAttribute.isEnabled" value="false" data-am-ucheck<%if (productAttribute.isEnabled! == false){%> checked<%}%>> 否</label></div>
					</div>
	            </div>
	             <div class="am-hide-sm-only am-u-md-6 am-text-warning">${isEnabledMessages!}</div>
	          </div>
	           
			  <div class="am-g am-margin-top">
			  <div class="am-u-sm-12 am-u-md-1 am-text-right admin-form-text"></div>
			  <div class="am-u-sm-12 am-u-md-11">
			  	<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
			    <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="window.history.back(); return false;">放弃保存</button>
			  </div>
			  </div>
	        </form>
		</div>
	</div>
</div>
<!-- content end -->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${base}/res/js/amazeui.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<![endif]-->
</body>
</html>
